<template>

    <div class="wrap">
        <ul>
         <li v-for="(item,index) in arr">
            <div>
                <input type="checkbox"><label for="">{{item.name}}</label><button @click="add(index)" :value="index"  v-model='listName' class="add">+</button><label>{{item.num}}</label><button class="del" @click="del(index)">-</button><label class="sumpre"></label><label>{{item.pre}}</label><label @click="remove(index)"> 删除</label>
            </div>
        </li>
        </ul>
        <button class="all" @click="changeall()">全选</button>
        <button class="fanxuan" @click="fanxuan">反选</button>
    </div>
</template>
<script>
   export default {
       data(){
           return {arr:[{ name:"剃须刀", num:1, pre:1000 }, { name:"小米耳机", num:1, pre:100 }, { name:"小米鼠标", num:1, pre:100 }],
           listName:[]}  
       },
       methods:{
           changeall:function(){
               let checkboxs=document.querySelectorAll("input")
               this.arr.forEach((item,index)=>{
                   checkboxs[index].checked=true
               })
           },
           fanxuan:function(){
                let checkboxs=document.querySelectorAll("input");
                checkboxs.forEach(item=>{
                    if(item.checked==true){
                        item.checked=false;
                    }else{
                        item.checked=true
                    }
                })
           },
           add:function(index){
               let sumpre=document.querySelectorAll(".sumpre")
              this.arr[index].num+=1;
           
            sumpre[index].innerHTML=this.arr[index].num*this.arr[index].pre
           },
           del:function(index){
             let sumpre=document.querySelectorAll(".sumpre")
            this.arr[index].num-=1;
             if(this.arr[index].num<=0){
                  this.arr[index].num=0;
              }
              sumpre[index].innerHTML=this.arr[index].num*this.arr[index].pre
           },
           remove:function(index){
               let checkboxs=document.querySelectorAll("input");
               if(checkboxs[index].checked){
 this.arr.splice(index,1)
               }
              
          
           }
       }
  }

</script>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
        
    }
    .wrap{
            width: 100%;
            height: 100%;
        }
        ul{
            width: 100%;
            height: 100%;
        }
        li{
            width: 100%;
            height: 100px;
          
        }
        li div{
            width: 100%;
            height: 100%;
  display: flex;
  justify-content: space-around
        }
       li button{
            width: 100px;
            height: 50px;
        }
</style>